<!DOCTYPE html>
<html>

<head>
    <title>容器商店</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 基础样式库 -->
    <link rel="stylesheet" type="text/css" href="{{cdn}}/static/v5/example/css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="{{cdn}}/static/v5/example/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{{cdn}}/static/v5/example/css/style.min.css">
    <!-- 功能插件样式 -->
    <link rel="stylesheet" type="text/css" href="{{cdn}}/static/v5/js/jquery-confirm/jquery-confirm.min.css">

    <style>
        /* 波浪动画样式 */
        .wave {
            background-color: #f9fafb;
            overflow: hidden;
            position: relative;
        }

        .wave > div {
            z-index: 1;
        }

        .wave:before {
            content: ' ';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ffffff;
            z-index: -1;
        }

        .wave:after {
            content: ' ';
            width: 1000px;
            height: 1025px;
            position: absolute;
            bottom: 65%;
            left: -250px;
            border-radius: 35%;
            background: white;
            z-index: 0;
        }

        .wave:after {
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .wave-animate:after {
            -webkit-animation: animate-wave 15s infinite linear;
            animation: animate-wave 15s infinite linear;
        }

        .wave-animate-slow:after {
            -webkit-animation: animate-wave 25s infinite linear;
            animation: animate-wave 25s infinite linear;
        }

        .wave-primary {
            background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
        }

        .wave-success {
            background-color: rgba(var(--bs-success-rgb), 0.1) !important;
        }

        .wave-info {
            background-color: rgba(var(--bs-info-rgb), 0.1) !important;
        }

        .wave-warning {
            background-color: rgba(var(--bs-warning-rgb), 0.1) !important;
        }

        @-webkit-keyframes animate-wave {
            from {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes animate-wave {
            from {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        /* 卡片样式优化 */
        .card {
            transition: all 0.3s ease;
            border-radius: 8px;
            overflow: hidden;
        }

        .card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .card-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-right: 15px;
        }

        .card-body {
            position: relative;
            z-index: 1;
        }

        /* 容器卡片样式 */
        .container-card {
            min-height: 120px;
        }

        /* 图片演示样式 */
        .app-image {
            max-width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 15px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .app-image:hover {
            transform: scale(1.05);
        }

        /* 模态框样式 */
        .modal-img {
            max-width: 100%;
            max-height: 80vh;
        }

        /* 卡片内容布局 */
        .card-content {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .card-text-container {
            flex-grow: 1;
        }
    </style>
</head>

<body>
    <!-- 主容器 -->
    <div class="container-fluid py-4">
        <!-- 页面标题 -->
        <div class="row mb-4">
            <div class="col-md-12">
                <div class="card wave wave-animate-slow wave-primary">
                    <div class="card-body">
                        <h2 class="mb-0"><i class="mdi mdi-container"></i> 容器商店</h2>
                        <p class="text-muted mt-1">一键部署常用应用容器</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 容器应用列表 -->
        <div class="row">
            <!-- ESP-AI服务端 -->
            <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
                <div class="card wave wave-animate wave-success container-card">
                    <div class="card-body card-content">
                        <!-- 应用图片 -->
                        <img src="https://wmimg.com/i/113/2024/06/665c706e14480.png" alt="ESP-AI服务端演示" class="app-image" data-toggle="modal" data-target="#imageModal" data-src="{{cdn}}/static/images/esp-ai-demo.jpg">
                        
                        <div class="d-flex align-items-center">
                            <div class="card-icon text-success">
                                <i class="mdi mdi-robot"></i>
                            </div>
                            <div class="flex-grow-1 card-text-container">
                                <h5 class="card-title mb-1">ESP-AI服务端</h5>
                                <p class="card-text text-sm text-muted mb-0">ESP-AI是一个基于esp32开发的智能对话机器人，类似小爱同学</p>
                            </div>
                            <a href="#" class="btn btn-success btn-sm ml-3">安装</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- MySQL数据库 -->
            <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
                <div class="card wave wave-animate wave-info container-card">
                    <div class="card-body card-content">
                        <!-- 应用图片 -->
                        <img src="{{cdn}}/static/images/mysql-demo.jpg" alt="MySQL数据库演示" class="app-image" data-toggle="modal" data-target="#imageModal" data-src="{{cdn}}/static/images/mysql-demo.jpg">
                        
                        <div class="d-flex align-items-center">
                            <div class="card-icon text-info">
                                <i class="mdi mdi-database"></i>
                            </div>
                            <div class="flex-grow-1 card-text-container">
                                <h5 class="card-title mb-1">MySQL数据库</h5>
                                <p class="card-text text-sm text-muted mb-0">开源关系型数据库管理系统，广泛用于Web应用</p>
                            </div>
                            <a href="#" class="btn btn-info btn-sm ml-3">安装</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Nginx服务器 -->
            <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
                <div class="card wave wave-animate wave-warning container-card">
                    <div class="card-body card-content">
                        <!-- 应用图片 -->
                        <img src="{{cdn}}/static/images/nginx-demo.jpg" alt="Nginx服务器演示" class="app-image" data-toggle="modal" data-target="#imageModal" data-src="{{cdn}}/static/images/nginx-demo.jpg">
                        
                        <div class="d-flex align-items-center">
                            <div class="card-icon text-warning">
                                <i class="mdi mdi-web"></i>
                            </div>
                            <div class="flex-grow-1 card-text-container">
                                <h5 class="card-title mb-1">Nginx服务器</h5>
                                <p class="card-text text-sm text-muted mb-0">高性能Web服务器和反向代理服务器</p>
                            </div>
                            <a href="#" class="btn btn-warning btn-sm ml-3">安装</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 图片预览模态框 -->
    <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalLabel">应用演示</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <img id="modalImage" class="modal-img" src="" alt="应用演示">
                </div>
            </div>
        </div>
    </div>

    <!-- 基础库 -->
    <script type="text/javascript" src="{{cdn}}/static/v5/example/js/jquery.min.js"></script>
    <script type="text/javascript" src="{{cdn}}/static/v5/example/js/popper.min.js"></script>
    <script type="text/javascript" src="{{cdn}}/static/v5/example/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="{{cdn}}/static/v5/example/js/main.min.js"></script>
    <!-- 功能插件 -->
    <script type="text/javascript" src="{{cdn}}/static/v5/example/js/layer/layer.js"></script>
    <script type="text/javascript" src="{{cdn}}/static/v5/example/js/jquery-confirm/jquery-confirm.min.js"></script>
    <!-- 页面特定脚本 -->
    <script src="{{cdn}}/static/js/iconfont.js"></script>
    <script type="text/javascript" src="{{cdn}}/static/js/main.js"></script>
    
    <script>
    $(document).ready(function () {
        // 页面加载时获取商店列表数据
        $.ajax({
            url: "/docker/api/shop_list",
            method: "GET",
            dataType: "json",
            success: function(response) {
                if (response.status) {
                    console.log("商店列表数据获取成功:", response.data);
                    // 动态生成卡片
                    renderShopList(response.data);
                } else {
                    console.error("获取商店列表失败:", response.msg);
                    $.alert('获取商店列表失败: ' + response.msg);
                }
            },
            error: function(xhr, status, error) {
                console.error("请求商店列表时发生错误:", error);
                $.alert('请求商店列表时发生错误: ' + error);
            }
        });
        
        // 渲染商店列表
        function renderShopList(shopList) {
            var container = $('.row').eq(1); // 获取容器应用列表的row
            container.empty(); // 清空现有内容
            
            shopList.forEach(function(shop) {
                var cardHtml = `
                    <div class="col-sm-12 col-md-6 col-lg-4 mb-4">
                        <div class="card wave wave-animate wave-${shop.color} container-card">
                            <div class="card-body card-content">
                                <!-- 应用图片 -->
                                <img src="${shop.image_url}" alt="${shop.name}演示" class="app-image" data-toggle="modal" data-target="#imageModal" data-src="${shop.image_url}">
                                
                                <div class="d-flex align-items-center">
                                    <div class="card-icon text-${shop.color}">
                                        <i class="mdi ${shop.icon}"></i>
                                    </div>
                                    <div class="flex-grow-1 card-text-container">
                                        <h5 class="card-title mb-1">${shop.name}</h5>
                                        <p class="card-text text-sm text-muted mb-0">${shop.description}</p>
                                    </div>
                                    <a href="#" class="btn btn-${shop.color} btn-sm ml-3 install-btn" data-app-id="${shop.id}" data-app-name="${shop.name}">安装</a>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                container.append(cardHtml);
            });
            
            // 重新绑定事件
            bindEvents();
        }
        
        // 绑定事件
        function bindEvents() {
            // 安装按钮点击事件
            $(".install-btn").off('click').on('click', function (e) {
                e.preventDefault();
                var appId = $(this).data('app-id');
                var appName = $(this).data('app-name');
                
                // 获取用户名（这里应该从后端获取）
                // 在实际应用中，您可能需要通过AJAX请求获取用户名
                var username = "{{ session.username }}" || "user"; // 从模板引擎获取用户名
                
                $.confirm({
                    title: '安装确认',
                    content: '' +
                    '<form action="" class="formName">' +
                    '<div class="form-group">' +
                    '<label>名称</label>' +
                    '<input type="text" placeholder="请输入名称" class="name form-control" value="' + username + appName + '" required readonly />' +
                    '<small class="form-text text-muted">应用名称格式: 用户名+应用名称，不可更改</small>' +
                    '</div>' +
                    '<div class="form-group">' +
                    '<label>端口</label>' +
                    '<input type="text" placeholder="请输入端口" class="port form-control" required />' +
                    '<button type="button" class="btn btn-sm btn-secondary mt-2" id="randomPort">自动随机端口</button>' +
                    '</div>' +
                    '</form>',
                    buttons: {
                        formSubmit: {
                            text: '提交',
                            btnClass: 'btn-blue',
                            action: function () {
                                var name = this.$content.find('.name').val();
                                var port = this.$content.find('.port').val();
                                if (!name || !port) {
                                    $.alert('请填写所有字段');
                                    return false;
                                }
                                
                                // 显示加载提示
                                var loadingDialog = $.dialog({
                                    title: '安装中',
                                    content: '正在安装应用，请稍候...',
                                    closeIcon: false
                                });
                                
                                // 发送安装请求
                                $.ajax({
                                    url: "/docker/install/" + appId,
                                    method: "POST",
                                    data: {
                                        name: name,
                                        port: port
                                    },
                                    dataType: "json",
                                    success: function(response) {
                                        loadingDialog.close();
                                        if (response.status) {
                                            $.alert('安装成功: ' + response.msg);
                                        } else {
                                            $.alert('安装失败: ' + response.msg);
                                        }
                                    },
                                    error: function(xhr, status, error) {
                                        loadingDialog.close();
                                        $.alert('安装过程中发生错误: ' + error);
                                    }
                                });
                            }
                        },
                        cancel: function () {
                            $.alert('取消安装');
                        }
                    },
                    onContentReady: function () {
                        var jc = this;
                        this.$content.find('#randomPort').on('click', function () {
                            var port = Math.floor(Math.random() * (65535 - 1024 + 1)) + 1024;
                            jc.$content.find('.port').val(port);
                        });
                    }
                });
            });

            // 图片点击事件 - 打开模态框显示大图
            $('.app-image').off('click').on('click', function() {
                var imgSrc = $(this).data('src');
                var imgAlt = $(this).attr('alt');
                
                $('#modalImage').attr('src', imgSrc);
                $('#imageModalLabel').text(imgAlt);
            });
        }
        
        // 初始化绑定事件
        bindEvents();
    });
    </script>
</body>

</html>